<template>
    <div class="edit-page clear-float">
        <div class="alert">
            <div class="alert-box">
                <h2>添加班级</h2>
                <i class="el-icon-close close" @click="cancel"></i>
                <el-form ref="form-class" :model="form" label-width="100px" class="add-class-form" label-position="left">
                    <el-form-item label="学生名称">
                        <el-input v-model="form.zwm"></el-input>
                    </el-form-item>
                    <el-form-item label="学生性别">
                        <el-select v-model="form.xb" placeholder="请选择学生性别" class="select-block">
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-input v-model="form.csrq"></el-input>
                    </el-form-item>
                    <el-form-item label="招生来源">
                        <el-input v-model="form.zsly"></el-input>
                    </el-form-item>
                    <el-form-item label="学生手机号">
                        <el-input v-model="form.dh"></el-input>
                    </el-form-item>
                    <el-form-item label="父母手机号">
                        <el-input v-model="form.fmdh"></el-input>
                    </el-form-item>
                    <el-form-item label="微信号">
                        <el-input v-model="form.wx"></el-input>
                    </el-form-item>
                    <el-form-item label="家庭地址">
                        <el-input v-model="form.jtdz"></el-input>
                    </el-form-item>
                    <el-form-item label="公立学校">
                        <el-input v-model="form.glxx"></el-input>
                    </el-form-item>
                    <el-form-item label="年级班级">
                        <el-input v-model="form.njbj"></el-input>
                    </el-form-item>
                    <el-form-item label="班级">
                        <el-select v-model="form.bj" placeholder="请选择班级" class="select-block" filterable>
                            <el-option :label="v.mc" :value="v.id" v-for="v in classList"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>

                <el-button type="info" class="submit" @click="submit">提交</el-button>
                <el-button @click="cancel" type="text">取消</el-button>
            </div>
        </div>
        <LoadingComponent v-if="isLoading"></LoadingComponent>
    </div>
</template>

<script type="text/javascript">

    import qs from 'qs'
    import LoadingComponent from 'components/loading'
    export default {
        components: { LoadingComponent },
        data () {
            return {
                form: {
                    zwm: '',
                    xb: '',
                    csrq: '',
                    zsly: '',
                    dh: '',
                    fmdh: '',
                    wx: '',
                    jtdz: '',
                    glxx: '',
                    njbj: '',
                    bj: ''
                },
                isLoading:false,

                classList: [],
            }
        },
        created () {
            this.$store.dispatch('changeTitle',"编辑")
            this.getClassList()
        },
        methods: {

            getClassList () {
                this.axios.get(this.$store.state.api + 'bj/listbj',{

                }).then( res => {
                    this.classList = res.data.data
                }).then( res => {
                })
            },

            submit () {
                this.isLoading = true;
                this.$refs['form-class'].validate((valid) => {
                    if (valid) {
                        this.axios.get(this.$store.state.api + 'xs/insertXs', {
                            params: {
                                zwm: this.form.zwm,
                                xb: 1,
                                csrq: this.form.csrq,
                                zsly: this.form.zsly,
                                dh: this.form.dh,
                                fmdh: this.form.fmdh,
                                wx: this.form.wx,
                                jtdz: this.form.jtdz,
                                glxx: this.form.glxx,
                                njbj: this.form.njbj,
                                bj: this.form.bj
                            }
                        }).then( res => {
                            // this.$emit('close',{type:'add',cancel:false})
                            this.isLoading = false;
                        }).catch( res => {
						 this.$message.danger("服务器繁忙，请重试");
                            this.isLoading = false;
                            // this.$emit('close','add')
                        })
                        // alert("OK")
                    } else {
						 this.$message.danger("服务器繁忙，请重试");
                    }
                });
            },
            cancel () {
               this.$emit('close',{type:'add',cancel:true})
            }
        }
    }
</script>

<style lang="less" scoped>
    .edit-page {
        position: fixed;
        left:0;right:0;top:0;bottom:0;
        margin:auto;
        z-index: 999;

        .alert-box {
            width: 80%;
        }

        .select-block{
            display: block;
        }

        h2{
            text-align: center;
            line-height: 40px;
        }
        .left, .right {
            float: left;
            width: 50%;
            padding:10px 20px;
        }
        .left{
            border-right:1px solid #ccc;
        }
        .right {
            text-align: left;
        }
        .submit{
            width: 150px;
            margin:30px auto;
            margin-bottom:0;
        }

        .search-item {
            margin-right:10px;
        }

        .code-search {
            width: 250px;
            height: 30px;
            margin:10px 0 10px 0;
        }
    }
</style>
